<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- <el-button
          type="success"
          plain
          size="mini"
          @click="uploadExcel"
          v-hasPermi="['']"
          >一键导入</el-button
        > -->
        <el-upload action="/上传文件的接口" :on-change="uploadExcel" :auto-upload="false" :show-file-list="false" accept=".xls, .xlsx">
          <el-button type="warning" icon="el-icon-folder-add">一键导入</el-button>
          <!-- <div slot="tip" v-if="fileData">{{ fileData.name }}</div> -->
        </el-upload>
      </el-col>
    </el-row>
    <el-table :data="studentlist" stripe border>
      <el-table-column type="index" width="40px"></el-table-column>
      <el-table-column label="姓名" prop="name" width="70px"></el-table-column>
      <el-table-column label="UID" prop="uname"></el-table-column>
      <el-table-column label="赠送天数" prop="sex"></el-table-column>
      <el-table-column label="会员" prop="tel"></el-table-column>
      <!-- <el-table-column label="学院" prop="xueyuan"></el-table-column>
      <el-table-column label="班级" prop="banji"></el-table-column>
      <el-table-column label="楼宇号" prop="lynumber"></el-table-column>
      <el-table-column label="宿舍号" prop="sushe"></el-table-column>
      <el-table-column label="操作" width="150px"> </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10, 100]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>
</template>

<script>
import XLSX from "xlsx";
export default {
  data() {
    // 添加手机号的验证规则
    var checkPhone = (rule, value, cb) => {
      // 验证手机号的正则表达式
      // const regPhone = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      const regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (regPhone.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的手机号"));
    };
    return {
      // 学生列表
      studentlist: [],
      // 要搜索学生的学号
      studentNumber: "",
      // 要搜索学生的姓名
      studentName: "",
      // 要搜索的宿舍号
      susheNumber: "",
      // 要搜索的学院
      xueyuan: "",
      // 要搜索的楼宇号
      lyNumber: "",
      // 要搜索的班级名字
      className: "",
      queryInfo: {
        // 搜索关键字
        query: "",
        // 当前页数
        pagenum: 1,
        // 当前页每页显示多少条数据
        pagesize: 5,
      },
      // 总页数
      total: 0,
      // 控制添加用户的对话框的显示与隐藏
      addDialogVisible: false,
      // 添加用户的表单数据
      addForm: {
        pass: "123456",
        state: 1,
        stuNumber: "",
        stuName: "",
        sex: "",
        tel: "",
        sushe: "",
        xueyuan: "",
        banji: "",
        lyNumber: "",
        fdy: "",
        fdytel: "",
        family: "",
        familytel: "",
      },
      // 添加表单的验证规则对象
      addFormRules: {
        stuName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        tel: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
        stuNumber: [
          { required: true, message: "请输入学号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        xueyuan: [
          { required: true, message: "请填写学院名字", trigger: "blur" },
        ],
        banji: [{ required: true, message: "请填写班级名称", trigger: "blur" }],
        fdy: [{ required: true, message: "请填写辅导员姓名", trigger: "blur" }],
        fdytel: [
          { required: true, message: "请填写辅导员电话", trigger: "blur" },
        ],
        family: [
          { required: true, message: "请填写紧急联系人姓名", trigger: "blur" },
        ],
        familytel: [
          { required: true, message: "请填写紧急联系人电话", trigger: "blur" },
        ],
        lyNumber: [
          {
            required: true,
            message: "请填写楼宇号,格式为“新区*号楼”",
            trigger: "blur",
          },
        ],
        sushe: [
          { required: true, message: "请填写宿舍号，例如101", trigger: "blur" },
        ],
      },
      // 控制查看/修改学生信息的对话框的显示与隐藏
      viewdialogVisible: false,
      // 查看学生信息的表单数据
      viewForm: {
        id: "",
        uname: "",
        name: "",
        sex: "",
        tel: "",
        sushe: "",
        xueyuan: "",
        banji: "",
        lynumber: "",
        fdy: "",
        fdytel: "",
        family: "",
        familytel: "",
      },
    };
  },
  created() {
    this.oneQuest();
  },
  methods: {
    // 封装页面加载请求函数
    oneQuest() { },
    search() { },
    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pagesize = newSize;
      this.oneQuest();
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pagenum = newPage;
      this.oneQuest();
    },
    // ----------以下为导入Excel数据功能--------------
    // 文件选择回调
    uploadExcel(file, fileList) {
      console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel(e) {
      console.log("1", e);
      let that = this;
      const files = that.fileData;
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          console.log("432", workbook.SheetNames);
          if (workbook.SheetNames.length >= 1) {
            this.$message({
              message: "导入数据表格成功",
              showClose: true,
              type: "success",
            });
          }
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          console.log(ws);
          that.outputs = []; //清空接收数据
          for (var i = 0; i < ws.length; i++) {
            var sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              id: ws[i]["id"],
              name: ws[i]["姓名"],
              uname: ws[i]["学号"],
              sex: ws[i]["性别"],
              tel: ws[i]["联系电话"],
              xueyuan: ws[i]["学院"],
              banji: ws[i]["班级"],
              lynumber: ws[i]["楼宇号"],
              sushe: ws[i]["宿舍号"],
            };
            that.studentlist.unshift(sheetData);
          }
          this.$refs.upload.value = "";
        } catch (e) {
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
  },
};
</script>

<style lang="css" scoped>
.el-button {
  margin-left: 30px;
}
</style>
